<%-- 
    Document   : pasajesPaso2
    Created on : 27/05/2014, 06:35:16 PM
    Author     : USUARIO
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>AdminLTE | Dashboard</title>
        <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
        <!-- bootstrap 3.0.2 -->
        <link href="../../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <!-- font Awesome -->
        <link href="../../css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <!-- Ionicons -->
        <link href="../../css/ionicons.min.css" rel="stylesheet" type="text/css" />
        <!-- Theme style -->
        <link href="../../css/AdminLTE.css" rel="stylesheet" type="text/css" />
    
    </head>
    <body class="skin-blue">         
        
        <!-- header logo: style can be found in header.less -->
        <%@include file="../../jspf/header.jspf" %>
        <!-- header logo: style can be found in header.less -->
        
        <div class="wrapper row-offcanvas row-offcanvas-left">
            <!-- Left side column. contains the logo and sidebar -->
            <aside class="left-side sidebar-offcanvas">                
                <!-- sidebar: style can be found in sidebar.less -->
                <section class="sidebar">
                    <!-- Sidebar user panel -->
                    <div class="user-panel">
                        <div class="pull-left image">
                            <img src="../../img/avatar3.png" class="img-circle" alt="User Image" />
                        </div>
                        <div class="pull-left info">
                            <p>Hello, Jane</p>

                            <a href="#"><i class="fa fa-circle text-success"></i> Online</a>
                        </div>
                    </div>
                    <!-- search form -->
                    <form action="#" method="get" class="sidebar-form">
                        <div class="input-group">
                            <input type="text" name="q" class="form-control" placeholder="Search..."/>
                            <span class="input-group-btn">
                                <button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
                            </span>
                        </div>
                    </form>
                    <!-- /.search form -->
                    
                    <!-- sidebar menu: : style can be found in sidebar.less -->
                    <%@include file="../../jspf/menu.jspf" %>
                    <!-- sidebar menu: : style can be found in sidebar.less -->
                    
                </section>
                <!-- /.sidebar -->
            </aside>

            <!-- Right side column. Contains the navbar and content of the page -->
            <aside class="right-side">                
                <!-- Content Header (Page header) -->
                <section class="content-header">
                    <h1>
                        Pasajes
                        <small>Mantenedor</small>
                    </h1>
                    <ol class="breadcrumb">
                        <li><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>
                        <li class="active">Pasajes Paso 2</li>
                    </ol>
                </section>

                <!-- Main content -->
                <section class="content">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="box box-primary">
                                <div class="box-header">
                                    <h3 class="box-title">Seleccionar Asientos</h3>                                    
                                </div><!-- /.box-header -->
                                <div class="box-body">
                                    <div class="row">
                                        <div class="col-xs-4">
                                            <label>Piso 1</label>
                                            <table>
                                                <tr>
                                                    <th>
                                                        <button style="background:#F5A9A9;border:1px solid #F78181;color:red;">
                                                            <img src="../../img/broken-seat.png" width="20" height="20"/>
                                                            <b>01</b>
                                                        </button>
                                                    </th>
                                                    <th>
                                                        <button style="background:#81F7BE;border:1px solid #04B404;color:#21610B;">
                                                            <img src="../../img/empty-seat.png" width="20" height="20"/>
                                                            <b>02</b>
                                                        </button>
                                                    </th>
                                                    <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
                                                    <th>
                                                        <button style="background:#81F7BE;border:1px solid #04B404;color:#21610B;">
                                                            <img src="../../img/empty-seat.png" width="20" height="20"/>
                                                            <b>03</b>
                                                        </button>
                                                    </th>
                                                </tr>
                                                <tr>
                                                    <th>
                                                        <button style="background:#81F7BE;border:1px solid #04B404;color:#21610B;">
                                                            <img src="../../img/empty-seat.png" width="20" height="20"/>
                                                            <b>04</b>
                                                        </button>
                                                    </th>
                                                    <th>
                                                        <button style="background:#F5A9A9;border:1px solid #F78181;color:red;">
                                                            <img src="../../img/broken-seat.png" width="20" height="20"/>
                                                            <b>05</b>
                                                        </button>
                                                    </th>
                                                    <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
                                                    <th>
                                                        <button style="background:#F3E2A9;border:1px solid #DBA901;color:#B18904;">
                                                            <img src="../../img/empty-seat.png" width="20" height="20"/>
                                                            <b>06</b>
                                                        </button>
                                                    </th>
                                                </tr>
                                                <tr>
                                                    <th>
                                                        <button style="background:#F5A9A9;border:1px solid #F78181;color:red;">
                                                            <img src="../../img/broken-seat.png" width="20" height="20"/>
                                                            <b>07</b>
                                                        </button>
                                                    </th>
                                                    <th>
                                                        <button style="background:#81F7BE;border:1px solid #04B404;color:#21610B;">
                                                            <img src="../../img/empty-seat.png" width="20" height="20"/>
                                                            <b>08</b>
                                                        </button>
                                                    </th>
                                                    <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
                                                    <th>
                                                        <button style="background:#F5A9A9;border:1px solid #F78181;color:red;">
                                                            <img src="../../img/broken-seat.png" width="20" height="20"/>
                                                            <b>09</b>
                                                        </button>
                                                    </th>
                                                </tr>
                                                <tr>
                                                    <th>
                                                        <button style="background:#81F7BE;border:1px solid #04B404;color:#21610B;">
                                                            <img src="../../img/empty-seat.png" width="20" height="20"/>
                                                            <b>10</b>
                                                        </button>
                                                    </th>
                                                    <th>
                                                        <button style="background:#81F7BE;border:1px solid #04B404;color:#21610B;">
                                                            <img src="../../img/empty-seat.png" width="20" height="20"/>
                                                            <b>11</b>
                                                        </button>
                                                    </th>
                                                    <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
                                                    <th>
                                                        <button style="background:#81F7BE;border:1px solid #04B404;color:#21610B;">
                                                            <img src="../../img/empty-seat.png" width="20" height="20"/>
                                                            <b>12</b>
                                                        </button>
                                                    </th>
                                                </tr>
                                            </table>
                                        </div>
                                        <div class="col-xs-4">
                                            <label>Piso 2</label>
                                            <table>
                                                <tr>
                                                    <th>
                                                        <button style="background:#F5A9A9;border:1px solid #F78181;color:red;">
                                                            <img src="../../img/broken-seat.png" width="20" height="20"/>
                                                            <b>01</b>
                                                        </button>
                                                    </th>
                                                    <th>
                                                        <button style="background:#81F7BE;border:1px solid #04B404;color:#21610B;">
                                                            <img src="../../img/empty-seat.png" width="20" height="20"/>
                                                            <b>02</b>
                                                        </button>
                                                    </th>
                                                    <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
                                                    <th>
                                                        <button style="background:#81F7BE;border:1px solid #04B404;color:#21610B;">
                                                            <img src="../../img/empty-seat.png" width="20" height="20"/>
                                                            <b>03</b>
                                                        </button>
                                                    </th>
                                                </tr>
                                                <tr>
                                                    <th>
                                                        <button style="background:#81F7BE;border:1px solid #04B404;color:#21610B;">
                                                            <img src="../../img/empty-seat.png" width="20" height="20"/>
                                                            <b>04</b>
                                                        </button>
                                                    </th>
                                                    <th>
                                                        <button style="background:#F5A9A9;border:1px solid #F78181;color:red;">
                                                            <img src="../../img/broken-seat.png" width="20" height="20"/>
                                                            <b>05</b>
                                                        </button>
                                                    </th>
                                                    <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
                                                    <th>
                                                        <button style="background:#81F7BE;border:1px solid #04B404;color:#21610B;">
                                                            <img src="../../img/empty-seat.png" width="20" height="20"/>
                                                            <b>06</b>
                                                        </button>
                                                    </th>
                                                </tr>
                                                <tr>
                                                    <th>
                                                        <button style="background:#F5A9A9;border:1px solid #F78181;color:red;">
                                                            <img src="../../img/broken-seat.png" width="20" height="20"/>
                                                            <b>07</b>
                                                        </button>
                                                    </th>
                                                    <th>
                                                        <button style="background:#F3E2A9;border:1px solid #DBA901;color:#B18904;">
                                                            <img src="../../img/empty-seat.png" width="20" height="20"/>
                                                            <b>08</b>
                                                        </button>
                                                    </th>
                                                    <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
                                                    <th>
                                                        <button style="background:#F5A9A9;border:1px solid #F78181;color:red;">
                                                            <img src="../../img/broken-seat.png" width="20" height="20"/>
                                                            <b>09</b>
                                                        </button>
                                                    </th>
                                                </tr>
                                                <tr>
                                                    <th>
                                                        <button style="background:#81F7BE;border:1px solid #04B404;color:#21610B;">
                                                            <img src="../../img/empty-seat.png" width="20" height="20"/>
                                                            <b>10</b>
                                                        </button>
                                                    </th>
                                                    <th>
                                                        <button style="background:#81F7BE;border:1px solid #04B404;color:#21610B;">
                                                            <img src="../../img/empty-seat.png" width="20" height="20"/>
                                                            <b>11</b>
                                                        </button>
                                                    </th>
                                                    <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
                                                    <th>
                                                        <button style="background:#81F7BE;border:1px solid #04B404;color:#21610B;">
                                                            <img src="../../img/empty-seat.png" width="20" height="20"/>
                                                            <b>12</b>
                                                        </button>
                                                    </th>
                                                </tr>
                                            </table>
                                        </div>
                                        <div class="col-xs-4">
                                            <input type="button" value="Asiento Ocupado" style="background:#F5A9A9;border:1px solid #F78181;color:red;"/>
                                            <input type="button" value="Asiento Reservado" style="background:#F3E2A9;border:1px solid #DBA901;color:#B18904;"/>
                                            <input type="button" value="Asiento Libre" style="background:#81F7BE;border:1px solid #04B404;color:#21610B;"/>
                                        </div>
                                    </div><br/><br/>
                                    <div class="row">
                                        <div class="col-xs-3">
                                            <label>Origen:&nbsp;</label><label style="color:#A4A4A4;">Trujillo</label>
                                        </div>
                                        <div class="col-xs-3">
                                            <label>Destino:&nbsp;</label><label style="color:#A4A4A4;">Lima</label>
                                        </div>
                                        <div class="col-xs-3">
                                            <label>Fecha y Hora de Salida:&nbsp;</label><label style="color:#A4A4A4;">hh:mm - dd/mm/aa</label>
                                        </div>
                                        <div class="col-xs-3">
                                            <label>Fecha y Hora de Llegada:&nbsp;</label><label style="color:#A4A4A4;">hh:mm - dd/mm/aa</label>
                                        </div>
                                    </div><br/>
                                    <div class="row">
                                        <div class="col-xs-3">
                                            <label>1° Piso:&nbsp;</label><label style="color:#A4A4A4;">Serv. VIP S/ 75.00</label>
                                        </div>
                                        <div class="col-xs-3">
                                            <label>2° Piso:&nbsp;</label><label style="color:#A4A4A4;">Serv. Super VIP S/ 95.00</label>
                                        </div>
                                        <div class="col-xs-3">
                                            <label>Asientos seleccionados:&nbsp;</label><label style="color:#A4A4A4;">2</label>
                                        </div>                                        
                                        <div class="col-xs-3">
                                            <label>Total a pagar:&nbsp;</label><label style="color:#A4A4A4;">Serv. VIP S/ 170.00</label>
                                        </div>
                                    </div><br/>
                                    <div class="row">                                        
                                        <div class="col-xs-3">
                                            <label>&nbsp;</label>
                                        </div>
                                        <div class="col-xs-3">
                                            <label>&nbsp;</label>
                                        </div>
                                        <div class="col-xs-3">
                                            <label>&nbsp;</label>
                                        </div>
                                        <div class="col-xs-3">
                                            <a href="pasajesPaso1.jsp">
                                                <button type="button" class="btn btn-primary"><< Atras</button>
                                            </a>
                                            <a href="pasajesPaso3.jsp">
                                                <button type="button" class="btn btn-primary">Siguiente >></button>
                                            </a>
                                        </div>
                                    </div><br/>
                                </div>
                            </div><!-- /.box -->
                        </div>
                    </div>                    
                </section><!-- /.content -->
            </aside><!-- /.right-side -->
        </div><!-- ./wrapper -->


        <!-- jQuery 2.0.2 -->
        <script src="../../js/jquery.min.js"></script>
        <!-- Bootstrap -->
        <script src="../../js/bootstrap.min.js" type="text/javascript"></script>
        <!-- AdminLTE App -->
        <script src="../../js/app.js" type="text/javascript"></script>
    </body>
</html>